import React, { useState, useMemo } from 'react';

function Example() {
    const [xiaohong, setXiaohong] = useState("小红你来了");
    const [zhiling, setZhiling] = useState("志玲你来了");

    return (
        <>
            <button onClick={() => { setXiaohong(new Date().getTime()) }}>小红</button>
            <button onClick={() => { setZhiling(new Date().getTime() + ',志玲穿着泳衣向我们飞奔而来。') }} style={{ marginLeft: `10px` }}>志玲</button>
            <ChildComponet name={xiaohong}>{zhiling}</ChildComponet>
        </>
    )
}


function ChildComponet({ name, children }) {
    function changeXiaohong(name) {
        console.log(`她来了，她来了。小红向我们走来了`);
        return name + ',小红真的向我们走来了'
    }

    const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) ;
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}


export default Example
